<template>
  <div class="container">
    <el-card v-if="liststate">
      <!-- 面包屑导航区域 -->
      <el-breadcrumb separator="/">
        <!-- <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> -->
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>大数据</el-breadcrumb-item>
        <el-breadcrumb-item>标签管理</el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
    <el-card shadow="never">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="requestParameters">
        <el-row :gutter="20" type="flex" justify="space-between">
          <el-col :span="22">
            <el-row type="flex">
              <el-col :span="10">
                <el-form-item label="标签名称">
                  <el-input v-model="formInline.tagName" @keyup.enter="handleFilter"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="21">
                <el-row type="flex">
                  <el-form-item label="状态">
                    <el-select v-model="formInline.state" placeholder="请选择" clearable @keyup.enter="handleFilter">
                      <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="emptyFn" size="small">清除</el-button>
                    <el-button type="primary" @click="searchFn" size="small">搜索</el-button>
                  </el-form-item>
                </el-row>
              </el-col>
            </el-row>
          </el-col>
          <!-- <el-col :span="6"> </el-col> -->
          <el-col>
            <el-row type="flex" justify="end">
              <el-form-item>
                <el-link type="primary" icon="el-icon-back" style="padding-right: 8px" v-if="liststate" @click="toClick"
                  >返回学科</el-link
                >
                <el-button
                  size="small"
                  style="margin-left: 10px"
                  @click="handleChange('add')"
                  type="success"
                  icon="el-icon-edit"
                  >新增目录</el-button
                >
              </el-form-item>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
      <el-alert
        v-if="alertText !== ''"
        :title="alertText"
        type="info"
        class="alert"
        :closable="false"
        show-icon
      ></el-alert>
      <el-table :key="dataList.id" :data="dataList" fit highlight-current-row style="width: 100%;margin-top:15px" border>
        <el-table-column align="center" label="序号" type="index"> </el-table-column>
        <el-table-column align="center" label="所属学科" prop="subjectName"> </el-table-column>
        <el-table-column label="标签名称" prop="tagName"> </el-table-column>
        <el-table-column align="center" label="创建者" prop="username"> </el-table-column>
        <el-table-column align="center" label="日期">
          <template slot-scope="scope">
            <span>{{ formatTime(scope.row.addDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.state == 1">启用</span>
            <span v-else>禁用</span>
          </template>
        </el-table-column>
        <!-- 按钮 -->
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button size="small" @click="start(scope.row)" type="text" ref="anniu">
              <span v-if="scope.row.state == 0">启用</span>
              <span v-else>禁用</span>
            </el-button>
            <el-button size="small" @click="handleChange(scope.row.id)" type="text" :disabled="scope.row.state === 1"
              >修改</el-button
            >
            <el-button size="small" @click="delRoles(scope.row)" type="text" :disabled="scope.row.state === 1"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          style="margin-top: 15px"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="Number(formInline.page)"
          :total="Number(total)"
          :page-size="Number(formInline.pagesize)"
          :page-sizes="[10, 20, 30, 50]"
          layout="sizes, prev, pager, next, jumper"
          v-if="!liststate"
        ></el-pagination>
      </div>
      <!-- end -->
      <!-- 新增标签弹层 -->
      <Dialog
        ref="add"
        :titleInfo="titleInfo"
        :subjectID="subjectID"
        :liststate="liststate"
        :id="id"
        :show-dialog="showDialog"
        @close="closeadd"
      ></Dialog>
    </el-card>
  </div>
</template>

<script>
import { list, remove, changeState } from '@/api/hmmm/tags.js'
import { status } from '@/api/hmmm/ta.js'
import dayjs from 'dayjs'
import Dialog from './../components/tags-add.vue'
export default {
  name: 'Tags',
  components: {
    Dialog
  },
  data () {
    return {
      liststate: false,
      formInline: {
        page: 1,
        pagesize: 10
      },
      id: '',
      showDialog: false, // 添加目录组件的展示
      alertText: '', // 页面总数据
      dataList: [],
      total: 0,
      titleInfo: {
        pageTitle: '标签', // 页面标题
        text: '' // 新增、编辑文本
      },
      subjectID: ''
    }
  },
  computed: {
    status () {
      return status
    }
  },
  created () {
    this.getList()
    if (this.$route.query.id) {
      this.liststate = true
      this.subjectID = this.$route.query.id
      this.formInline.subjectID = this.subjectID
      this.getList()
    }
  },
  methods: {
    toClick () {
      this.$router.push('/subjects/list')
    },
    // 格式化入职日期的方法
    formatTime (time) {
      return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
    },
    onSubmit () {
      console.log('submit!')
    },
    // 标签列表数据
    async getList () {
      const res = await list(this.formInline)
      this.dataList = res.data.items
      // 获取总条数
      this.total = res.data.counts
      this.alertText = `共 ${this.total} 条记录`
    },
    // 清空按钮
    emptyFn () {
      this.formInline = {
        page: 1,
        pagesize: 10
      }
      this.$refs.requestParameters.resetFields()
    },
    // 搜索按钮
    async searchFn () {
      this.formInline.page = 1
      this.getList(this.formInline)
    },
    // 新增标签,修改标签
    handleChange (id) {
      this.showDialog = true
      if (id === 'add') {
        this.titleInfo.text = '创建' // 给弹层传参
        this.id = ''
      } else {
        this.titleInfo.text = '修改' // 给弹层传参
        this.id = id
        this.$refs.add.getsubjects(id)
      }
    },

    // 每页显示信息条数
    handleSizeChange (val) {
      this.formInline.pagesize = val
      if (this.formInline.page === 1) {
        this.getList()
      }
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.formInline.page = val
      this.getList()
    },
    // 启用
    async start (val) {
      if (val.state === 1) {
        val.state = 0
      } else {
        val.state = 1
      }
      var data = {
        id: val.id,
        state: val.state
      }
      await changeState(data)
    },
    // 删除
    async delRoles (row) {
      this.$confirm('此操作将永久删除用户 ' + ', 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          await remove({ id: row.id })
            .then(response => {
              this.$message.success('成功删除了用户' + '!')
              this.getList(this.formInline)
            })
            .catch(response => {
              this.$message.error('删除失败!')
            })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    },
    // 弹窗关闭
    closeadd () {
      this.showDialog = false
      this.getList()
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  margin: 10px;
}
</style>
